<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>BoxImg</title>
<link rel="stylesheet" href="css/imgBox.css" type="text/css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/patches/imgBox.css" type="text/css"/>
<![endif]-->

<!--
<script type="text/javascript" src="firebug-lite/build/firebug-lite-debug.js"></script>
-->

<script type="text/javascript" src="sizzle/sizzle.js"></script>
<script type="text/javascript" src="js/aider.js"></script>
<script type="text/javascript" src="js/imgBox.js"></script>
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a href="#nav" class="skip">Skip to navigation (Press Enter).</a></li>
	<li><a href="#col3" class="skip">Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
	<div class="page">
		<div id="header">
			<div id="topnav">
				<span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
			</div>
			<h1>Image Box <em>imitate 163</em></h1>
			<span>^_^</span>
		</div>
		<!-- begin: main navigation #nav -->
		<div id="nav">
			<div class="hlist">
				<ul>
					<li><a href="#">My Douban</a></li>
					<li><a href="#">Make Y! your homepage</a></li>
					<li><a href="#">Y! china</a></li>
				</ul>
			</div>
		</div>
		<!-- end: main navigation -->
		
		<!-- begin: main content area #main -->
		<div id="main">
			<div class="subcolumns">
				<!-- begin: #col1 - first float column -->
				<div id="col1">
					<div id="col1_content" class="clearfix">
						
					</div>
				</div>
				<!-- end: #col1 -->
				
				<!-- begin: #col3 static column -->
				<div id="col3">
					<div id="col3_content" class="clearfix">
						<h3>HelloWorld</h3>
						<div id="imgBox">
							<div id="imgShow">
								<div class="imgElem">
									<img src="images/boxImg/3.jpg" alt="" width="286" height="350" />
								</div>
								<div class="prev"></div>
								<div class="next"></div>
								<div class="loading" style="display:none;"></div>
							</div>
							<div id="imgCont" class="subcolumns">
								<div class="subc">
									<span>(3/51)</span>
									<span>关凌</span>
								</div>
							</div>
							<hr />
							<div id="imgNavi" class="subcolumns clearfix">
								<div class="leftNav">
									<a href="#" class="navLeft" hidefocus="true"></a>
								</div>
								<div class="thumbNav">
									<div class="thumbImg">
										<ul style="width:1160px;">
											<li class="active" data-url="http://img4.cache.netease.com/photo/0026/2011-11-21/7JBI0OD94CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/1_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0026/2011-11-21/7JBIU0QE4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/2_s.jpg" alt="" /></a></li>
											<li data-url="http://img4.cache.netease.com/photo/0026/2011-11-21/7JBIV4DN4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/3_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0026/2011-11-21/7JBIUL0B4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/4_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0026/2011-11-21/7JBIUU0O4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/5_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0026/2011-11-21/7JBIV1UD4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/6_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0026/2011-11-21/7JBIU5UA4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/7_s.jpg" alt="" /></a></li>
											<li data-url="http://img4.cache.netease.com/photo/0026/2011-11-21/7JBIU3KS4CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/8_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0026/2011-11-21/7JBIU8U94CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/9_s.jpg" alt="" /></a></li>
											<li data-url="http://img4.cache.netease.com/photo/0026/2011-11-21/7JBIDFA24CJ80026.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/10_s.jpg" alt="" /></a></li>
											<!--
											<li class="active" data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/1_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0005/2011-12-04/7KF1O7QQ4TCQ0005.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/2_s.jpg" alt="" /></a></li>
											<li data-url="http://img3.cache.netease.com/photo/0005/2011-12-04/7KF3H58O4TCQ0005.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/3_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/4_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/5_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/6_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/7_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/8_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/9_s.jpg" alt="" /></a></li>
											<li data-url="http://www.cnblogs.com/images/cnblogs_com/cloudgamer/143727/o_mm_big.jpg"><a href="#" hidefocus="true"><img src="images/boxImg/10_s.jpg" alt="" /></a></li>
											-->
										</ul>
									</div>
									<div class="thumbScroll clearfix">
										<span class="scl_lt"></span>
										<span class="scl_rt"></span>
										<div class="scl_bg">
											<div class="scl_ct">
												<a href="" hidefocus="true">
													<b class="btn_lt"></b>
													<b class="btn_rt"></b>
													<span class="btn_bg">
														<span>
															<b class="btn_ct"></b>
														</span>
													</span>
												</a>
											</div>
										</div>
									</div>
								</div>
								<div class="rightNav">
									<a href="#" class="navRight" hidefocus="true"></a>
								</div>
							</div>
						</div>
					</div>
					<!-- IE Column Clearing -->
					<div id="ie_clearing">&nbsp;</div>
				</div>
				<!-- end: #col3 -->
			</div>
		</div>
		<!-- end: #main -->
		
		<!-- begin: #footer -->
		<div id="footer">Footer with copyright notice and status information <br />Layout based on <a href="http://www.yaml.de/">YAML</a></div>
		<!-- end: #footer -->
		
	</div>
</div>
<script type="text/javascript">
	var link_lt_a = Sizzle("#imgNavi > div.leftNav > a")[0],
		link_rt_a = Sizzle("#imgNavi > div.rightNav > a")[0],
		
		nav_bg = Sizzle("#imgNavi > div.thumbNav > div.thumbScroll > div.scl_bg > div.scl_ct")[0],
		nav_btn = Sizzle("a", nav_bg)[0],
		
		btn_bg = Sizzle("span.btn_bg", nav_btn)[0],
		btn_md_s = Sizzle("span.btn_bg > span", nav_btn)[0],
		
		thumb = Sizzle("#imgNavi > div.thumbNav > div.thumbImg")[0],
		thumb_ul = Sizzle("ul", thumb)[0],
		
		nav_li_ar = Sizzle("li", thumb_ul);
	
	var img_load = Sizzle("#imgShow > div.loading")[0],
		img_prev = Sizzle("#imgShow > div.prev")[0],
		img_next = Sizzle("#imgShow > div.next")[0];
		
	var img = Sizzle("#imgShow > div.imgElem > img")[0];
	
	new ImgBox({
		'link_lt_a': link_lt_a,
		'link_rt_a': link_rt_a,
		'btn_bg': btn_bg,
		'btn_md_s': btn_md_s,
		'thumb_ul': thumb_ul,
		'nav_btn': nav_btn,
		'nav_bg': nav_bg,
		'thumb': thumb,
		'nav_li_ar': nav_li_ar,
		'img_prev': img_prev,
		'img_next': img_next,
		'img_load': img_load,
		'img': img
	});
</script>
</body>
</html>